<template>
  <div class="right-card">
    <m-card title="地震省份分布">
      <v-chart ref="vChart" :option="option" :autoresize="true" />
    </m-card>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
// There should not be negative values in rawData
const rawData = [
  [120, 110, 80, 10, 20,],
  [20, 13, 10, 13, 9,],
  [22, 18, 19, 23, 20],
];
const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left:40,
  right: 30,
  top: 30,
  bottom: 30,
};
const series = ["3.0-3.9", "4.0-4.9", "5.0+"].map((name, sid) => {
  // 定义每个系列的颜色（可自定义）
  const colors = [
    "#409EFF", // 蓝色（对应3.0-3.9）
    "#E6A23C", // 橙色（对应4.0-4.9）
    "#F56C6C", // 红色（对应5.0+）
  ];

  return {
    name,
    type: "bar",
    stack: "total",
    barWidth: "60%",
    label: {
      show: false,
    },
    // 关键：设置系列颜色，图例颜色会自动同步
    itemStyle: {
      color: colors[sid], // 按索引取颜色（与系列一一对应）
    },
    data: rawData[sid], // 原始数据，如 [10, 30, 30, ...]
  };
});
// 图表配置（保持不变）
const option = ref({
  tooltip: {
    trigger: "axis", // 触发类型为坐标轴
    axisPointer: {
      // 坐标轴指示器样式
      type: "shadow", // 阴影指示器
    },
    backgroundColor: "rgba(0, 0, 0, 0.7)", // 背景颜色
    textStyle: {
      color: "#fff", // 文字颜色
      fontSize: 14, // 文字大小
    },
    formatter: (params) => {
      // 自定义提示框内容
      const param = params[0]; // 获取当前柱体数据
      return `
        <div style="color:${param.color}">●</div>
        ${param.name}: ${(param.value * 100).toFixed(1)}%
      `;
    },
  },

  legend: {
    selectedMode: false,
    textStyle: {
      color: "#ffffff", // 设置图例文字颜色为白色
      fontSize: 14, // 设置图例文字大小（可选）
    },
  },
  grid,
  yAxis: {
    type: "value",
    min: 0, // 从 0 开始
    max: 180, // 最大值 1（对应 100%）
    interval: 30, // 每 0.2 显示一个刻度
    axisLabel: {
      formatter: (value) => value, // 显示为百分比
      color: "#ffffff", // 结合之前的需求，设置字体颜色（白色）
    },
  },
  xAxis: {
    type: "category",
    data: ["新疆","西藏","四川","台湾","云南"],
    axisLabel: {
      // Y 轴标签配置
      textStyle: {
        color: "#ffffff", // Y 轴字体颜色（白色）
        fontSize: 14, // Y 轴字体大小（可选）
      },
    },
  },
  series,
});
</script>
<style lang="scss"></style>
